<h2 mat-dialog-title>{{title | translate}}</h2>

<mat-dialog-content class='properties-content' data-automation-id="variables-dialog">
    <mat-tab-group [@.disabled]="true" selectedIndex="0">

        <mat-tab label="{{ 'SDK.VARIABLES_EDITOR.TABS.VIEWER' | translate }}">
           <amasdk-properties-viewer [properties]="editorContent" [requiredCheckbox]="requiredCheckbox" [displayedColumns]="columns"></amasdk-properties-viewer>
        </mat-tab>
        <mat-tab label="{{ 'SDK.VARIABLES_EDITOR.TABS.JSON_EDITOR' | translate }}">
            <amasdk-json-editor
                [vsTheme]="vsTheme$ | async"
                [content]="editorContent"
                (changed)="onChange($event)"
            ></amasdk-json-editor>
            <p class="mat-error" *ngIf="error">{{ error | translate }}</p>
        </mat-tab>

    </mat-tab-group>

</mat-dialog-content>


<mat-dialog-actions class="adf-dialog-buttons">
    <span class="adf-fill-remaining-space"></span>

    <button mat-button mat-dialog-close (click)="onClose()" data-automation-id="close-button">
        {{ 'APP.DIALOGS.CLOSE' | translate }}
    </button>

    <button [disabled]="error && error!=='undefined'" class="adf-dialog-action-button save-btn" color="primary" mat-button (click)="save()"
        data-automation-id="update-button">
        {{ 'APP.DIALOGS.UPDATE' | translate }}
    </button>
</mat-dialog-actions>
